Skip to content

fix(ui): resolve email input border alignment and focus overlay in Footer - #1679

Closed
codexbeats wants to merge 2 commits into
reframe-oss:mainfrom
codexbeats:fix/footer-email-input-styling
Closed

fix(ui): resolve email input border alignment and focus overlay in Footer#1679
codexbeats wants to merge 2 commits into
reframe-oss:mainfrom
codexbeats:fix/footer-email-input-styling

Conversation

@codexbeats

@codexbeats codexbeats commented Jul 21, 2026 •
edited
Loading

Copy link
Copy Markdown

📝 Title

fix(ui): resolve email input border alignment and focus overlay in Footer

📌 Type of Change

  • 🐛 Bug fix (non-breaking change which fixes visual styling/alignment bug)
  • ✨ New feature
  • 🧹 Refactor / Code quality
  • 📚 Documentation

🔗 Related Issue

Fixes #1678

🎯 What Changes Were Made?

  1. Focus Ring & Outline Reset: Applied explicit resets (border-0 outline-none focus:outline-none focus:ring-0 focus:shadow-none focus:border-0) to the <input> element inside Footer.tsx to override global input styles.
  2. Alignment & Spacing: Adjusted horizontal padding (px-1) on the email field and added shrink-0 to the submit arrow button for balanced alignment.

❓ Why Were These Changes Made?

  • Global input:focus rules defined in globals.css were overriding bg-transparent and adding a secondary border/box-shadow directly to the inner <input> element.
  • This caused a nested blue focus outline box inside the form container around the placeholder text upon selection.

🧪 How to Test

  1. Run bun dev or npm run dev to launch the local development server.
  2. Scroll to the footer of the page.
  3. Click on the "ENTER YOUR EMAIL" input under the UPDATES section.
  4. Verify that:
    • No inner blue border overlay or box-shadow appears inside the box.
    • The focus border smoothly highlights the outer form wrapper only.
    • Text alignment and submit icon remain centered and responsive.

⚠️ Breaking Changes

  • None. This change is strictly visual/CSS and affects only the footer newsletter input element.

📋 GSSoC Contribution Checklist

  • My code follows the code style guidelines of this project.
  • I have performed a self-review of my code.
  • I have linked the relevant issue.
  • The changes generate no new warnings or console errors.

@vercel

vercel Bot commented Jul 21, 2026

Copy link
Copy Markdown

@codexbeats is attempting to deploy a commit to the magic-peach1's projects Team on Vercel.

A member of the Team first needs to authorize it.

@github-actions

github-actions Bot commented Jul 21, 2026

Copy link
Copy Markdown
Contributor

✅ PR Format Check Passed — @codexbeats

Basic format checks passed. A maintainer will review your code changes.

This does not mean the PR is approved — it just means the format is correct.

@github-actions github-actions Bot added level:beginner Beginner level - 20 pts type:bug Bug fix type:design UI/UX design type:docs Documentation type:feature New feature type:refactor Code refactor type:testing Testing labels Jul 21, 2026
@github-actions

github-actions Bot commented Jul 21, 2026

Copy link
Copy Markdown
Contributor

👋 Thanks for your PR, @codexbeats!

Welcome to Reframe — a browser-based video editor built for everyone 🎬

🟠 GSSoC'26 PR detected — thanks for contributing under GirlScript Summer of Code 2026!

What happens next

  1. 🤖 Automated checks — build & TypeScript typecheck will run automatically
  2. ✅ Vercel preview — a preview deployment will be created (requires maintainer authorization for fork PRs)
  3. 👀 Code review — a maintainer will review your changes
  4. 🚀 Merge — once approved, your PR will be merged!

Quick checklist

  • PR title follows Conventional Commits (e.g. feat: add dark mode)
  • Linked the issue this PR closes (e.g. Closes #123)
  • Tested the changes locally (bun run dev)
  • Build passes (bun run build)

Useful links

Happy coding! 🎉

@github-actions github-actions Bot added the gssoc'26 GirlScript Summer of Code 2026 label Jul 21, 2026
@github-actions

github-actions Bot commented Aug 13, 2026

Copy link
Copy Markdown
Contributor

👋 This PR has been inactive for 21 days. It will be automatically closed in 14 days if there's no further activity.

If you need help with this PR, please comment or ping a maintainer.
Make sure your branch is rebased onto main and all CI checks pass.

@github-actions github-actions Bot added the needs-fixes PR has issues that need to be fixed label Aug 13, 2026
@magic-peach magic-peach added the status:awaiting-review Clean PR waiting on a maintainer, not the author label Aug 14, 2026
@github-actions github-actions Bot removed the needs-fixes PR has issues that need to be fixed label Aug 15, 2026
@magic-peach

magic-peach commented Sep 15, 2026

Copy link
Copy Markdown
Collaborator

Thanks for the contribution! Another open PR (#1757: fix(ui): resolve email input border alignment and focus overlay in Footer #1678) tackles the same issue and is a bit further along (cleaner CI / no merge conflicts), so I'm consolidating there to keep review focused in one place. Closing this one — no reflection on the work itself, just avoiding split review across duplicates. Feel free to bring anything over to #1757 if it adds something that one doesn't have yet!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

gssoc'26 GirlScript Summer of Code 2026 level:beginner Beginner level - 20 pts status:awaiting-review Clean PR waiting on a maintainer, not the author type:bug Bug fix type:design UI/UX design type:docs Documentation type:feature New feature type:refactor Code refactor type:testing Testing

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

[BUG] fix email input alignment and remove unexpected blue focus border overlay

2 participants

@codexbeats @magic-peach